<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>06_插入和替换元素操作</title>
		<!-- 06_插入和替换元素操作  针对元素增加删除修改操作 
		append()        功能：在匹配元素集合中所有元素的内部末尾插入内容
		prepend()       功能：在匹配元素集合中所有元素的内部开头插入内容
		
		after()         功能：在匹配元素集合中所有元素的外部后边插入内容
		before()        功能：在匹配元素集合中所有元素的外部前边插入内容
		
		remove()         功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
		empty()          功能：清空匹配元素集合中所有的元素和子元素【盒子模型不删掉】
		
		replaceWith()
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			button{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;
			}
			#target{
				border: 1px solid red;
				margin-left: 5px;
				padding: 10px;
				margin-top: 10px;
				border-radius: 5px;
			}
			body{
				margin: 20px;
			}
			.boss{
				width: 300px;
				height: 300px;
				border-radius: 50%;
				background: #ff0;
				background-image: url(../img/1.gif);
				background-size: 100% 100%;
				color: transparent;
				display: block;
			}
		</style>
	</head>
	<body>
		<!-- html 7个按钮  div包含p:目标元素的初始段落 id="target"
		            div包含p:插入新元素的初始段落 id="newElement" 隐藏display:none
			css 按钮：外边距5px，内边距10px 15px  鼠标移动到按钮上显示手指
			    body:外边距20px
				#target:1px边框 内边距10px 上外边距10px
		 -->
		<button id="appendBtn">内部末尾插入元素</button>
		<button id="prependBtn">内部开头插入元素</button>
		<button id="afterBtn">外部后边插入元素</button>
		<button id="beforeBtn">外部前边插入元素</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceBtn">替换元素</button>
		<!-- 目标显示区域 -->
		<div id="target">
			<p>目标元素的初始段落</p>
		</div>
		<!-- 用于插入和替换区域 -->
		<div id="newElement" style="display: none;">
			<p>插入新元素的初始段落</p>
		</div>
		
		<script>
			/*1.点击内部末尾按钮 文本后面追加新元素中包含内容操作*/
			$("#appendBtn").click(function(){
				//点击按钮 追加新元素---自带内容?
				//1.1追加内容是新元素--克隆--html结构全部复制出来，元素包含属性
				var cpe=$("#newElement").clone();
				//clone()创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				//1.2自带属性和属性值：隐藏---显示
				cpe.css("display","block");
				//1.3将复制出来的新元素，追加给当前元素
				$("#target").append(cpe);
			});
			/*2.点击内部开头按钮 文本后面追加新元素中包含内容操作*/
			$("#prependBtn").click(function(){
				var cpe=$("#newElement").clone();
				cpe.css("display","block");
				$("#target").prepend(cpe);
			});
			/*3.点击外部后边按钮 文本后面追加新元素中包含内容操作*/
			$("#afterBtn").click(function(){
				var cpe=$("#newElement").clone();
				cpe.addClass("boss");
				$("#target").after(cpe);
			});
			/*4.点击外部前边按钮 生成圆 保留背景色 文本不需要 背景图300*300*/
			$("#beforeBtn").click(function(){
				var cpe=$("#newElement").clone();
				cpe.css({
					"width":"300px",
					"height":"300px",
					"background-color":"#ff0",
					"border-radius":"50%",
					"background-image":"url(../img/1.gif)",
					"background-size":"100% 100%",
					"color":"transparent",
					"display":"block"
				});
				$("#target").before(cpe);
			});
			/*5.点击删除按钮  页面上所有元素包括子元素全部删除【盒子模型】*/
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			/*6.点击清空元素按钮 页面上所有元素内容全部删掉【盒子模型不删】*/
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
			/*7.点击替换元素按钮 页面上目标元素替换为新元素*/
			$("#replaceBtn").click(function(){
				//克隆新元素 #newElement【父子级】
				var c=$("#newElement").clone().css("display","block");
				//替换 找到目标元素 替换新元素
				$("#target").replaceWith(c);
			});
		</script>
	</body>
</html>